<template>
  <div class="Students-container">
      <div class="Students-LeftNav">
          <div class="Students-LeftNav-TopBar">
              <a-button type="default" @click="router.push('/dashboard')">
                <LeftOutlined style="position: absolute; right:12px;top:12px;"/>
              </a-button>
              <img style="position: absolute; left:56px;top:15px;" src="../../assets/CourseManageView/inform.svg" alt="SVG Image"/>
              <p>数据科学导论</p>
          </div>
          <div class="Students-LeftNav-Management">
              <div class="Students-LeftNav-Management-Title">课程管理</div>
              <div class="Students-LeftNav-Management-Nav">
                <a-menu
                  v-model:selectedKeys="current"
                  mode="vertical"
                  :items="items"
                />
              </div>                
          </div>
      </div>
      <div class="Students-Content">
          <div class="Students-Invite">
              
              <a-button type="primary" @click="showModal">使用课程码邀请学生</a-button>
              <a-modal v-model:open="open" title="使用二维码邀请学生" width="500px" ok-text="确认" cancel-text="关闭" @ok="handleOk">
                <a-qrcode :value="invite_link" style="margin-left: 30%;"/>
              </a-modal>
          </div>
          <div class="Students-Add">
              <a-button type="default">批量添加学生</a-button>
          </div>
          <div class="Students-Search">
              <a-input-search v-model:value="searchvalue" placeholder="搜索学生/助教" style="width: 307px; height:40px" @search="onSearch" />
          </div>
          <a-button type="primary" danger ghost style="position: absolute; top:16px; right:16px;height:40px;border-radius:12px;">移除班级</a-button>
          <!-- 这里需要分页:pagination="pagination" -->
          <div class="Students-Table">
              <a-table :columns="PersonnelColumns"
              :row-key="(record) => record.stu_num"
              :data-source="dataSource"
              :loading="loading"
              bordered>
                <template #bodyCell="{ column, text }">
                  <template v-if="column.dataIndex === 'stu_name'">
                    <a>{{ text }}</a>
                  </template>
                </template>
              </a-table>
          </div>
          
      </div>
      <div class="Agent-Wrap">
        <AgentChatFrame />  
    </div>
  </div>
</template>
<script lang="js" setup>
import AgentChatFrame from '../../components/AgentChatFrame.vue';
import { LeftOutlined } from '@ant-design/icons-vue';
import { h, ref, reactive, computed, onMounted } from 'vue';
import { usePagination } from 'vue-request';
import api from '../../api/index';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { message, Modal, theme } from 'ant-design-vue';

const router = useRouter();
const route = useRoute();
const courseNumber = route.params.course_number;

// 搜索 
// 如果搜索到，将元素换到数组第一个位置
const searchvalue = ref('');
const onSearch = () => {
  console.log(searchvalue.value);
  console.log(dataSource.value.length);
  //console.log(dataSource.value[0]);
  let found = false;
  for (let i = 0; i < dataSource.value.length; i++) {
    
    if (dataSource.value[i].stu_num === searchvalue.value) {

      console.log('找到了元素:', dataSource.value[i]);
      found = true;
      let temp = dataSource.value[0];
      //console.log(temp);
      dataSource.value[0] = dataSource.value[i];
      dataSource.value[i] = temp;
      break; // 退出循环
    }
  }
  if (!found) {
    console.log('没有找到匹配的学生');
    message.error('没有找到匹配的学生');
  }
};

//课程邀请码转换链接
const invite_link = ref('https://www.baidu.com/');
const open = ref(false);

const showModal = () => {
  open.value = true;
};
const handleOk = e => {
  console.log(e);
  open.value = false;
};

//人员列表头
const PersonnelColumns = [
  {
    title: '姓名',
    dataIndex: 'stu_name',
  },
  // {
  //   title: '身份',
  //   dataIndex: 'ident',
  // },
  {
    title: '学号',
    dataIndex: 'stu_num',
  },
];

const current = ref(["Students"]);
const items = ref([
  {
    key: "CourseInfo",
    label: h("a", { href: `/course/${courseNumber}/info`, target: "_self" }, "课程信息"),
    title: "CourseInfo",
  },
  {
    key: "Students",
    label: h("a", { href: `/course/${courseNumber}/students`, target: "_self" }, "人员管理"),
    title: "Students",
  },
  {
    key: "knowledge",
    label: h("a", { href: `/course/${courseNumber}/knowledge`, target: "_self" }, "知识库管理"),
    title: "knowledge",
  },
  {
    key: "Agent",
    label: h("a", { href: `/course/${courseNumber}/agent`, target: "_self" }, "智能体设置"),
    title: "Agent",
  },
]);

const dataSource = ref([]);
const loading = ref(false);

async function fetchCourseStudent() {
  try {
    loading.value = true;
    const response = await api.getStudentsByCourseId(courseNumber);
    console.log(response.data);
    
    if (Array.isArray(response.data)) {
      dataSource.value = response.data;
    } else {
      dataSource.value = [];
    }
  } catch (error) {
    console.error("获取课程信息失败", error);
    message.error("获取课程信息失败");
    dataSource.value = [
      {
     stu_name:"11111",
     stu_num:"11111"
        },
        {
     stu_name:"22222",
     stu_num:"22222"
        },
        {
     stu_name:"33333",
     stu_num:"33333"
        },
        {
     stu_name:"44444",
     stu_num:"44444"
        },
        {
     stu_name:"55555",
     stu_num:"55555"
        },
        {
     stu_name:"66666",
     stu_num:"66666"
        },
        {
     stu_name:"如果学号被搜索到，该学生会被换到列表头显示",
     stu_num:"77777"
        },
     
    ];
  } finally {
    loading.value = false;
    //loading.value=true;
  }
}

onMounted(() => {
  fetchCourseStudent();
});
</script>
<style lang="scss" scoped>
.Students-container {
  min-width: 1366px;
  width:100vw;
  height: 100vh;
  display: flex;
  background: #F6F8F7;
}

.Students-LeftNav {
  box-sizing: border-box;
  width: 236px;
  height: 100%;
  flex-shrink: 0;
  display: inline-block;
  margin-left: 12px; 
  padding-top: 20px;
  justify-content: center; 
}
.Students-LeftNav-TopBar {
    width:236px;
    height: 40px;

    align-content: center;
    position: relative;
}
.Students-LeftNav-TopBar .ant-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    box-shadow: 0px 2px 2px 0px rgba(9, 9, 9, 0.06);

    display: inline-block;
    position: absolute;
    left: 0;
    top: 4px;
    
}
.Students-LeftNav-TopBar p {
    overflow: hidden;
    color: var(--45, #8C8C8C);
    text-overflow: ellipsis;
    font-family: "PingFang SC";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; 

    display: inline-block;
    position: absolute;
    left:84px;
    top: 12px;  
}

:deep(.ant-menu-light) {
  background:none !important;
}

.Students-LeftNav-Management {
    width:230px;
    height:auto; 
    margin-top: 28px;
    
}
.Students-LeftNav-Management-Title {
    overflow: hidden;
    color: var(--45, #8C8C8C);
    text-overflow: ellipsis;
    font-family: "PingFang SC";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; 
}

.Students-LeftNav-Management-Nav {
    width:220px;
    height:500px;
    margin-top: 4px;

    .ant-menu {
      background: #F6F8F7;
      border:0 !important;
    }
    :deep(.ant-menu-light .ant-menu-item-selected) {   
      border-radius: 12px;
      border: 1px solid #D9D9D9;
      background-color: #FFF !important;
      box-shadow: 0px 2px 2px 0px #F2F2F2, 0px 2px 2px 0px #F2F2F2;
    }
}

.Students-Content {
  display: flex;
  flex:1;
  flex-direction: column;
  /*width: 100%;*/
  height: calc(100% - 40px);
  margin-top: 20px;
  margin-bottom: 20px;

  border-radius: 12px;/*边框圆角*/
  border: 1px solid #EDEDED;
  background: #FFF;
  box-shadow: 0px 2px 2px 0px #F2F2F2;


  position: relative;
}

.Students-Invite {
    position: absolute;
    top: 16px;
    margin-left: 16px;
}
.Students-Invite .ant-btn {
    border-radius: 12px;
    background: #262626;
    width: 176px;
    height: 40px;
    &:hover {
      background-color: #484848; /* 悬浮时的背景颜色 */
      border-color: #484848;    /* 悬浮时的边框颜色 */
      box-shadow: 0 0 0 1px #262626; /* 悬浮时的边框阴影 */
    }
}

.Students-Add {
    margin-top: 16px;
    margin-left: 208px;
}
.Students-Add .ant-btn {
    border-radius: 12px;
    
    width: 128px;
    height: 40px;
}
.Students-Search {
    margin-top: 20px;
    margin-left: 20px;
    height: 40px;
}

.Students-Table {
    max-width: 100%;
    height: 500px;
    margin-left: 24px;
    margin-top: 16px;
    margin-right: 24px;
}

</style>